<template>
	<div class="spancom" style=" ;" ref="spancom" @click="deleteEle">
		<span>{{ countValue + " " + unit }}</span>
		<a-icon
			v-if="!disabled"
			type="close-circle"
			class="close-circle"
			style=""
		/>
	</div>
</template>
<script>
	export default {
		props: {
			unit: {
				type: [String],
				default: "件",
			},
			countValue: {
				type: Number,
				default: 0,
			},
			index: {
				type: Number,
				default: 0,
			},
			disabled: {
				type: [Boolean],
				default: true,
			},
		},
		data() {
			return {
				// unit: this.unit,
			}
		},
		methods: {
			deleteEle({ target }) {
				if (target["nodeName"] === "path" || target["nodeName"] === "svg") {
					// let ele = this.$refs["spancom"]
					// ele.parentNode.removeChild(ele)
					// this.attrValue = ""
					// this.$emit("clearcountValue", 0)

					// this.$refs['spancom'][this.index].style.display = 'none'

					this.$emit("clearcountValue", this.index)
				}
			},
		},
	}
</script>
<style scoped lang='less'>
	.spancom {
		display: inline-block;
		margin-right: 10px;
		width: auto;
		height: 30px;
		padding: 0 20px 0 10px;
		box-sizing: border-box;
		background: #1890ff;
		color: #fff;
		line-height: 30px;
		border-radius: 4px;
		text-align: center;
		cursor: pointer;
		& > span {
			margin-right: 5px;
		}
		position: relative;
		.close-circle {
			display: none;
			font-size: 12px;
			// color: rgba(0, 0, 0, 0.3);
			// position: absolute;
			// right: 5px;
			// top: 50%;
			// transform: translate(0, -50%);
		}
		&:hover .close-circle {
			display: inline-block;
			position: absolute;
			right: 5px;
			top: 50%;
			transform: translate(0, -50%);
			color: rgba(255, 255, 255, 1);
		}
	}
</style>